<template>
  <view class="container">
    <view class="box">
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="options" @click="bindClick(e)">
          <view :class="['Item',remindItem.handle? 'ItemCss1' :'']">
            <view :class="['Item_top',remindItem.handle? 'hCss5':'hCss7']">
              <view class="Item_top_image" @click="navTo('/subpkg/ldentity/ldentity?id=' + remindItem.animal.id)">
                <image :src="remindItem.animal.previewImage" mode="aspectFill"></image>
              </view>
              <view class="Item_top_content">
                <h1>{{remindItem.animal.productName}}</h1>
                <text>记录时间：{{remindItem.createTime}}</text>
              </view>
              <view class="compile" @click="edit">
                <image src="/static/images/mine/compile.png" mode="aspectFill"></image>
              </view>
            </view>
            <view :class="['item_bottom', remindItem.handle? 'hCss5':'hCss3']">
              <view :class="['item_bottom_left', remindItem.handle? '':'flexjc']">
                <h1>{{remindItem.tag.tagName}}</h1>
                <view v-if="remindItem.handle">
                  <image src="/static/images/mine/biao.png" mode="aspectFill"></image>
                  <text>该去记录啦！</text>
                </view>
                <view v-else>
                  <image src="/static/images/mine/biao.png" mode="aspectFill"></image>
                  <text>{{remindItem.tips}}后</text>
                </view>
              </view>
              <view class="item_bottom_right" v-if="remindItem.handle" @click="complete">
                去完成
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>

  </view>
</template>

<script>
  import {
    deleteEstablish
  } from '@/api/remind.js'

  export default {
    name: "remind_Item",
    data() {
      return {
        // 3状态
        // 记录时间
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#FF6666' // 按钮的背景颜色
          }
        }],
        delete: false
      };
    },
    props: {
      remindItem: {
        type: [Array, Object],
        required: false,
        default: []
      }

    },
    onLoad() {
      this.delete = false
    },
    methods: {
      edit() {
        // console.log(this.remindItem.id)
        this.navTo('/subpkg/addremind/addremind?remindId=' + this.remindItem.id + '&id=' + this.remindItem.tag.id + '&name=' + this.remindItem.tag.tagName)
        wx.setStorageSync('remindItem', this.remindItem)
      },
      bindClick(e) {
        deleteEstablish(this.remindItem.id).then(res => {
          this.$util.Tips({
            title: '删除成功'
          })
          this.delete = true
          this.$emit('delete', this.delete)
        }).catch(res => {
          this.$util.Tips({
            title: res
          })
        })
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      complete() {
        this.navTo('/subpkg/addrecordList/addrecordList?name=' + this.remindItem.tag.tagName + '&id=' + this.remindItem.tag.id + '&animalId=' + this.remindItem.animal.id + '&productName=' + this.remindItem.animal.productName + '&reminderId=' + this.remindItem.id)
      }

    }
  }
</script>

<style lang="scss">
  .ItemCss1 {
    height: 366rpx
  }

  .box {
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
  }

  .flexjc {
    display: flex;
    justify-content: space-between;
  }

  .Item {
    width: 690rpx;
    background-color: #fff;
    box-sizing: border-box;

    .Item_top {
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      padding: 38rpx 40rpx;
      border-bottom: 1rpx solid rgba(241, 241, 241, 1);

      .Item_top_image {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }

      .Item_top_content {
        h1 {
          font-size: 36rpx;
          color: rgba(61, 61, 61, 1);
          font-weight: 600;
        }

        text {
          font-size: 28rpx;
          color: rgba(61, 61, 61, .5);
        }
      }

      .compile {
        position: absolute;
        top: 40rpx;
        right: 40rpx;

        image {
          width: 34rpx;
          height: 34rpx;
          opacity: .5;
        }
      }
    }

    .hCss7 {
      height: 70%;
    }

    .hCss5 {
      height: 50%;
    }

    .hCss3 {
      height: 30%;
    }

    .item_bottom {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 38rpx 40rpx;

      .item_bottom_left {
        width: 100%;

        h1 {
          font-size: 36rpx;
          color: rgba(61, 61, 61, 1);
          font-weight: 600;
        }

        view {
          display: flex;
          align-items: center;
          margin-top: 14rpx;

          image {
            width: 34rpx;
            height: 34rpx;
            margin-right: 10rpx;
          }

          text {
            font-size: 28rpx;
            color: rgba(61, 61, 61, .5);
          }
        }
      }

      .item_bottom_right {
        width: 140rpx;
        height: 56rpx;
        border-radius: 28rpx;
        text-align: center;
        line-height: 56rpx;
        background-color: rgba(253, 211, 56, 1);
        font-size: 26rpx;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
</style>
